<template>
	<view class="rule-wrapper">
		<top-nav title="平台规则"></top-nav>
<!-- 		<view class="input-wrapper">
			<u-input v-model="value" type="text" inputAlign="center" :border="false" placeholder="请输入您的问题"  />
		</view>
		<view class="sub-btn">
			<view class="btn">如何下载</view>
			<view class="btn" @click="gotoPage('/pages/home/home')">首页</view>
			<view class="btn">如何收钱</view>
		</view> -->
		<view class="content">
			<view class="title">问题类型</view>
			<view class="list" v-for="item in list" @click="gotoRule('/pages/rule/rule1?id='+item.id)">
				<view class="name">{{item.title}}</view>
				<view class="right">
					<view class="info">查看</view>
					<view class="icon"></view>
				</view>
			</view>
		</view>
		<view class="bottom-wrapper">
			<view class="desc">快捷方式：点一下试试</view>
			<view class="sub-btn">
				<view class="btn" @click="gotoPage('/pages/team/team')">我的团队</view>
				<view class="btn" @click="gotoRootPage('/pages/property/property')">首页</view>
				<view class="btn" @click="gotoRootPage('/pages/count/count')">我的资产</view>
			</view>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import topNav from 'components/top-nav/top-vue.vue';
	export default{
		data(){
			return {
				value: '',
				list: []
			}
		},
		components:{
			topNav:topNav
		},
		mounted() {
			this.$u.post('/api/getHelpIndex', {account_id:uni.getStorageSync('account_id')}).then(res=>{
				if(res.code==200){
					this.list = res.data
				} else {
					this.$refs.uToast.show({
						title: res.message,
						type: 'error',
					})
				}
			})
		},
		methods:{
			gotoRootPage(path){
				uni.redirectTo({
				    url: path
				});
			},
			gotoPage(path){
				if(path){
					uni.navigateTo({
					    url: path
					});
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.rule-wrapper{
		.input-wrapper{
			width:560rpx;
			height:80rpx;
			margin:80rpx auto 40rpx;
			border:1px solid #69DA73;
			border-radius: 40rpx;
			color:#ccc;
		}
		.content{
			padding:0  40rpx;
			margin-top:28*2rpx;
			.title{
				margin-bottom:28*2rpx;
				font-size:24*2rpx;
			}
			.list{
				margin-bottom:30rpx;
				display: flex;
				.name{
					flex:1;font-size:14*2rpx;
					color:rgba(255,255,255,0.8)
				}
				.right{
					display: flex;
					align-items: center;
					.info{
						color:#69DA73;
						opacity: 0.8;
					}
					.icon{
						width: 0;
						height: 0;
						border-top: 10rpx solid transparent;
						border-left: 12rpx solid #FFFFFF;
						border-bottom:10rpx solid transparent;
						margin-left: 20rpx;
					}
				}
			}
		}
		.bottom-wrapper{
			position:fixed;
			bottom:0;
			width:100%;
			height:70*2rpx;
			background-color: #202020;
			text-align:center;
			.desc{
				color:#69DA73;
				font-size:13*2rpx;
				margin-bottom:26rpx;
			}
		}
		.sub-btn{
			display: flex;
			justify-content: space-between;
			padding:0 60*2rpx;
			.btn{
				padding:0 24rpx;
				height:50rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 25rpx;
				font-size:12*2rpx;
				background-color: rgba(255,255,255,0.1);
			}
		}
	}
</style>
